<template>
  <root>
    <safe-header
      v-bind="{
        fixedTop: true,
        color: '#fff',
        type: 'doubleTitle',
        textColor: '#000000',
      }"
    >
      <template v-slot:left>
        <div class="d-flex justify-left align-center font-weight-bold">
          WMS仓管系统
        </div>
      </template>
      <template v-slot:right>
        <div style="text-align: right" class="font-weight-bold">
          <v-icon color="#F8A73C"> {{ iconList.mdiMapMarker }}</v-icon>
          <span>上海总仓</span>
        </div>
      </template>
    </safe-header>
    <!-- 内容 -->
    <div class="component-wrapper">
      <keep-alive>
        <component
          v-bind:is="pageComponent"
          v-on:changeTab="ComChangeTab"
        ></component>
      </keep-alive>
    </div>

    <section class="footer">
      <v-bottom-navigation
        @change="switchTab"
        :value="tabValue"
        color="#193690"
        grow
      >
        <v-btn>
          <span>{{ $t("base.main_page") }}</span>
          <v-icon>{{ iconList.mdiMenu }}</v-icon>
        </v-btn>
        <!-- <v-btn>
          <span>{{ $t("base.message") }}</span>
          <v-icon>{{ iconList.mdiMessageText }}</v-icon>
        </v-btn> -->
        <v-btn>
          <span>{{ $t("base.mine") }}</span>
          <v-icon>{{ iconList.mdiAccount }}</v-icon>
        </v-btn>
      </v-bottom-navigation>
    </section>
  </root>
</template>
<script>
import SafeHeader from "../../components/safeHeader_wms";
import Menu from "../Menu/App";
import Mine from "../Mine/App";
import pullRefresh from "../../components/pullRefresh.vue";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import Root from "@/components/Root.vue";
import { mdiMapMarker, mdiMenu, mdiMessageText, mdiAccount } from "@mdi/js";

export default {
  name: "MainTab",
  components: {
    SafeHeader,
    Menu,
    Mine,
    pullRefresh,
    swiper,
    swiperSlide,
    Root,
  },
  data: () => {
    return {
      iconList: {
        mdiMapMarker: mdiMapMarker,
        mdiMenu: mdiMenu,
        mdiMessageText: mdiMessageText,
        mdiAccount: mdiAccount,
      },
      shift: "movies",
      pageComponent: "Menu",
      mainComponents: ["Menu", "Mine"],
      tabValue: 0,
    };
  },
  computed: {},
  methods: {
    switchTab(val) {
      console.log(val);
      this.pageComponent = this.mainComponents[val];
      this.tabValue = val;
    },
    ComChangeTab(val) {
      let that = this;
      if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
        window.api.setTabBarAttr({
          index: val,
          callback: function () {
            that.switchTab(val);
          },
        });
      } else {
        this.$root.api.api.setTabBarAttr({
          index: val,
          callback: function () {
            that.switchTab(val);
          },
        });
      }
    },
  },
  created() {
    console.log("MainTab");
  },
  // mounted: function() {}
};
</script>
<style scoped lang="scss">
.footer {
  position: fixed;
  bottom: 0px;
  z-index: 999;
  width: 100%;
}
.component-wrapper {
  height: 100%;
  padding-bottom: 56px;
}
</style>